<template>
  <div class="workflow-designer">
    <el-container>
      <!-- 顶部工具栏 -->
      <el-header class="toolbar">
        <div class="toolbar-left">
          <el-button @click="saveWorkflow" type="primary">保存</el-button>
          <el-button @click="publishWorkflow" type="success">发布</el-button>
          <el-button @click="testWorkflow" type="warning">测试</el-button>
        </div>
        <div class="toolbar-right">
          <el-button @click="previewWorkflow" type="info">预览</el-button>
          <el-button @click="exportWorkflow" type="default">导出</el-button>
        </div>
      </el-header>

      <el-container>
        <!-- 左侧组件面板 -->
        <el-aside width="250px" class="component-panel">
          <div class="panel-title">组件库</div>
          <el-menu>
            <el-sub-menu index="ai">
              <template #title>
                <el-icon><Cpu /></el-icon>
                <span>AI节点</span>
              </template>
              <el-menu-item index="ai-chat" @click="addNode('ai-chat')">AI对话</el-menu-item>
              <el-menu-item index="ai-completion" @click="addNode('ai-completion')">文本补全</el-menu-item>
              <el-menu-item index="ai-embedding" @click="addNode('ai-embedding')">向量化</el-menu-item>
            </el-sub-menu>
            
            <el-sub-menu index="logic">
              <template #title>
                <el-icon><Connection /></el-icon>
                <span>逻辑节点</span>
              </template>
              <el-menu-item index="condition" @click="addNode('condition')">条件判断</el-menu-item>
              <el-menu-item index="loop" @click="addNode('loop')">循环</el-menu-item>
              <el-menu-item index="parallel" @click="addNode('parallel')">并行处理</el-menu-item>
            </el-sub-menu>
            
            <el-sub-menu index="data">
              <template #title>
                <el-icon><DataLine /></el-icon>
                <span>数据节点</span>
              </template>
              <el-menu-item index="input" @click="addNode('input')">输入</el-menu-item>
              <el-menu-item index="output" @click="addNode('output')">输出</el-menu-item>
              <el-menu-item index="transform" @click="addNode('transform')">数据转换</el-menu-item>
            </el-sub-menu>
            
            <el-sub-menu index="plugin">
              <template #title>
                <el-icon><Grid /></el-icon>
                <span>插件节点</span>
              </template>
              <el-menu-item index="api" @click="addNode('api')">API调用</el-menu-item>
              <el-menu-item index="function" @click="addNode('function')">函数</el-menu-item>
              <el-menu-item index="tool" @click="addNode('tool')">工具</el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-aside>

        <!-- 中间画布区域 -->
        <el-main class="canvas-area">
          <div id="workflow-canvas" class="workflow-canvas"></div>
        </el-main>

        <!-- 右侧属性面板 -->
        <el-aside width="300px" class="property-panel">
          <div class="panel-title">属性配置</div>
          <div v-if="selectedNode" class="property-content">
            <el-form label-width="80px">
              <el-form-item label="节点名称">
                <el-input v-model="selectedNode.name" />
              </el-form-item>
              <el-form-item label="节点类型">
                <el-input v-model="selectedNode.type" disabled />
              </el-form-item>
              <el-form-item label="描述">
                <el-input v-model="selectedNode.description" type="textarea" />
              </el-form-item>
              
              <!-- 根据节点类型显示不同的配置项 -->
              <template v-if="selectedNode.type === 'ai-chat'">
                <el-form-item label="模型">
                  <el-select v-model="selectedNode.config.model" placeholder="选择模型">
                    <el-option label="GPT-4" value="gpt-4" />
                    <el-option label="GPT-3.5" value="gpt-3.5-turbo" />
                    <el-option label="Claude-3" value="claude-3" />
                  </el-select>
                </el-form-item>
                <el-form-item label="温度">
                  <el-slider v-model="selectedNode.config.temperature" :min="0" :max="2" :step="0.1" />
                </el-form-item>
                <el-form-item label="最大长度">
                  <el-input-number v-model="selectedNode.config.maxTokens" :min="1" :max="4000" />
                </el-form-item>
              </template>
            </el-form>
          </div>
          <div v-else class="no-selection">
            请选择一个节点进行配置
          </div>
        </el-aside>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import { Cpu, Connection, DataLine, Grid } from '@element-plus/icons-vue'
import LogicFlow from '@logicflow/core'
import '@logicflow/core/dist/style/index.css'
import '@logicflow/extension/lib/style/index.css'

// 响应式数据
const selectedNode = ref(null)
let lf: LogicFlow | null = null

// 初始化LogicFlow
const initLogicFlow = () => {
  lf = new LogicFlow({
    container: document.querySelector('#workflow-canvas') as HTMLElement,
    grid: true,
    plugins: []
  })
  
  // 注册节点
  registerNodes()
  
  // 监听节点选择
  lf.on('node:click', ({ data }) => {
    selectedNode.value = data
  })
  
  // 监听画布点击
  lf.on('blank:click', () => {
    selectedNode.value = null
  })
  
  lf.render()
}

// 注册自定义节点
const registerNodes = () => {
  // 这里可以注册自定义节点类型
}

// 添加节点
const addNode = (type: string) => {
  if (!lf) return
  
  const nodeData = {
    id: `node_${Date.now()}`,
    type: type,
    x: 200,
    y: 200,
    properties: {
      name: `${type}节点`,
      description: '',
      config: {}
    }
  }
  
  lf.addNode(nodeData)
}

// 保存工作流
const saveWorkflow = () => {
  if (!lf) return
  
  const data = lf.getGraphData()
  console.log('保存工作流数据:', data)
  ElMessage.success('工作流保存成功')
}

// 发布工作流
const publishWorkflow = () => {
  ElMessage.success('工作流发布成功')
}

// 测试工作流
const testWorkflow = () => {
  ElMessage.info('开始测试工作流')
}

// 预览工作流
const previewWorkflow = () => {
  ElMessage.info('预览工作流')
}

// 导出工作流
const exportWorkflow = () => {
  if (!lf) return
  
  const data = lf.getGraphData()
  const jsonStr = JSON.stringify(data, null, 2)
  const blob = new Blob([jsonStr], { type: 'application/json' })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = 'workflow.json'
  a.click()
  URL.revokeObjectURL(url)
  
  ElMessage.success('工作流导出成功')
}

// 组件挂载后初始化
onMounted(() => {
  nextTick(() => {
    initLogicFlow()
  })
})
</script>

<style scoped>
.workflow-designer {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border-bottom: 1px solid #e4e7ed;
  padding: 0 20px;
}

.toolbar-left, .toolbar-right {
  display: flex;
  gap: 10px;
}

.component-panel, .property-panel {
  background: #fff;
  border-right: 1px solid #e4e7ed;
  overflow-y: auto;
}

.property-panel {
  border-right: none;
  border-left: 1px solid #e4e7ed;
}

.panel-title {
  padding: 15px;
  font-weight: bold;
  border-bottom: 1px solid #e4e7ed;
  background: #fafafa;
}

.canvas-area {
  background: #f5f5f5;
  padding: 0;
  position: relative;
}

.workflow-canvas {
  width: 100%;
  height: 100%;
}

.property-content {
  padding: 15px;
}

.no-selection {
  padding: 15px;
  text-align: center;
  color: #909399;
}
</style> 